<template>
  <div>
    <div>
      <input type="file" @change="convertToBase64" />
      <el-button @click="copyLink(imageBase64)">copy</el-button>
    </div>
    <div>
      <img height="200" width="200" style="object-fit: contain" :src="imageBase64" />
      <el-input
          type="textarea"
          autosize
          class="modify-ui"
          readonly
          ref='addressInput'
          v-model="imageBase64">
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageBase64: null,
    };
  },
  mounted() {
    this.$nextTick(() => {//滚动条显示问题
      this.$refs.addressInput.resizeTextarea();
    });
  },
  methods: {
    // 判断是否是 IE 浏览器
    isIE() {
      if (window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      } else {
        return false;
      }
    },
    // 拷贝地址
    copyLink(copy) {
      if (copy === null) {
        this.$message.warning("文本域内容为空,复制失败!!!");
        return false;
      }
      if (this.isIE()) {
        this.$copyText(copy);
        this.$refs.addressInput.select(); // 实现选中效果
        this.$message.success("复制成功!");
      } else {
        this.$copyText(copy).then((res) => {
          console.log(res, 'res')
          this.$refs.addressInput.select(); // 实现选中效果
          this.$message.success("复制成功!");
        }).catch((err) => {
          this.$message.error("该浏览器不支持自动复制, 请手动复制");
        });
      }
    },
    convertToBase64(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageBase64 = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
  },
};
</script>
